<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	#content{
		float:left;
		width:45%;
		font-size:16px;
		font-family:"微软雅黑";
		font-weight:bold;
	}
	.right{
		float:right;
		width:45%;
		background:#f5f5f5;
		padding:1%;
	}
  </style>
 </head>
 <body>
	<div>
		<pre id="content"></pre>
	</div>
	<div class="right">
		<h1>这是我的一个标题</h1>
		<ul>
			<li>这是我的第一个项目</li>
			<li>这是我的第二个项目</li>
			<li>这是我的第三个项目</li>
			<li>这是我的第四个项目</li>
		</ul>
	</div>
	<script type="text/javascript">
		let oContent = document.getElementById('content');

		let str = 
		`
		.right h1{
			text-align:center;//实现文字居中
			height:50px;//设置高度
			line-height:50px;//设置行高
		}
		.right li{
			list-style:none;//去掉li的默认样式
			height:30px;
			text-align:center;
			color:red;
		}
		`;
		let i = 0;
		let len = str.length;
		let style = document.createElement('style');
		timer = setInterval(() => {
			style.innerHTML += str.substr(i,1);
			oContent.innerHTML += str.substr(i,1);
			oContent.appendChild(style);
			i++;
			if(i >= len){
				clearInterval(timer);
			}
		},50)
	</script>
 </body>
</html>
